import "./ComponentList.less";
import designerLeftStore from "../DesignerLeftStore";
import eventOperateStore from "../../operate-provider/EventOperateStore";
import {
  componentCategorize,
  componentSubCategorize,
} from "./ComponentCategorize";
import componentListStore from "./ComponentListStore";
import { observer } from "mobx-react";
import { ComponentType, lazy, Suspense } from "react";
import Loading from "../../../json-schema/ui/loading/Loading";
import { IIconProps } from "@icon-park/react/lib/runtime";
import { Close } from "@icon-park/react";
import { Tooltip } from "tdesign-react";
import { useProductCodes } from "components";

const CompList = lazy(() => import("./list/CompList"));

export const CategoryList = observer(() => {
  const { categories, setCategories, setSubCategories } = componentListStore;
  return (
    <>
      {componentCategorize.map((item, index) => {
        const { icon, name, key } = item;
        const Icon = icon as ComponentType<IIconProps>;
        return (
          <Tooltip
            key={index}
            overlayClassName={`clo-item ${categories === key ? "clo-item-active" : ""}`}
            placement={"right"}
            content={name}
          >
            <Icon
              theme="outline"
              className={`clo-item ${categories === key ? "clo-item-active" : ""}`}
              strokeWidth={4}
              onClick={() => {
                setCategories(key);
                setSubCategories("all");
              }}
            />
          </Tooltip>
        );
      })}
    </>
  );
});

export const SubCategoryList: React.FC = observer(() => {
  const { categories, subCategories, setSubCategories } = componentListStore;
  return (
    <>
      {componentSubCategorize.map((item, index) => {
        const { name, key, parentKey } = item;
        if (categories === "all" || key === "all" || parentKey === categories) {
          return (
            <div
              key={index}
              onClick={() => setSubCategories(key)}
              className={`clt-item ${subCategories === key ? " clt-item-active" : ""}`}
            >
              {name}
            </div>
          );
        }
      })}
    </>
  );
});

export const ComponentList = () => {
  const codes = useProductCodes();
  return (
    <div className={"dl-component-list"}>
      <div className={"dl-cl-header"}>
        <div className={"dl-cl-header-title"}>组件列表</div>
        <div className={"dl-cl-header-operate"}>
          <Close
            style={{ cursor: "pointer" }}
            onClick={() => {
              const { setMenu } = designerLeftStore;
              setMenu("");
              const { rulerRef } = eventOperateStore;
              rulerRef?.ruleWheel();
            }}
          />
        </div>
      </div>
      <div className={"dl-cl-body"}>
        <Suspense fallback={<Loading />}>
          <div className={"main-categories"}>
            <CategoryList />
          </div>
          {/* <div className={'sub-categories'}><SubCategoryList/></div> */}
          <div className={"component-list"}>
            <CompList codes={codes} />
          </div>
        </Suspense>
      </div>
    </div>
  );
};
